<template>
	<div
		ref="editLayout"
		id="go-chart-edit-layout"
		class="flex-col overflow-auto"
		@mousedown="mousedownHandleUnStop"
		@drop="dragHandle"
		@dragover="dragoverHandle"
		@dragenter="dragoverHandle"
	>
		<edit-rule>
			<!-- 画布主体 -->
			<div id="go-chart-edit-content" @contextmenu="handleContextMenu">
				<!-- 展示 -->
				<edit-range>
					<EditComponentList />
				</edit-range>
			</div>
		</edit-rule>
		<!-- 底部控制 -->
		<EditBottom></EditBottom>
	</div>
</template>

<script setup>
import EditComponentList from './EditComponentList.vue';
import { useElementSize } from '@vueuse/core';
import { EditRange } from './components/EditRange';
import { EditRule } from './components/EditRule';
import { EditBottom } from './components/EditBottom';

import { handleContextMenu } from '@/views/chart/hooks/useContextMenu.hook';
import { dragHandle, dragoverHandle, mousedownHandleUnStop } from './hooks/useDrag.hook';

/**************************************************************当前编辑页面id ***************************************************************/
import { editCanvasConfig } from '@/store/chart/edit';
import { infoCatalog } from '@a/website';
import { JSONParse } from '@u';
import { resultArrange } from '@a/data';

const { pageId } = useRoute().params;
if (pageId) {
	$store.chart.pageId = pageId;
	infoCatalog({ id: pageId }).then((res) => {
		if (res?.data?.jsonContent) {
			$store.chart.editCanvasConfig = JSONParse(res.data.jsonContent).editCanvasConfig;
			$store.chart.componentList = JSONParse(res.data.jsonContent).componentList;
			$store.chart.addPageTabs({ id: pageId, title: $store.chart.editCanvasConfig.pageName });
			// 重置页面数据
			$store.chart.pageData = {};
			if ($store.chart.editCanvasConfig?.apiList?.length)
				$store.chart.editCanvasConfig.apiList.forEach((item) => fetchFn(item));
		}
	});
}
// 获取页面数据
async function fetchFn(data) {
	const res = await resultArrange({ id: data.reqID });
	if (res) {
		try {
			$store.chart.pageData = merge($store.chart.pageData, new Function('data', 'res', data.filter)(res.data, res));
		} catch (err) {
			console.error(err);
		}
	}
}

// 布局处理
const editLayout = shallowRef(null),
	{ width, height } = useElementSize(editLayout);
watch(
	[width, height, () => $store.chart.editCanvasConfig.width, () => $store.chart.editCanvasConfig.height],
	debounce(() => {
		if (editLayout.value) $store.chart.computedScale();
	}, 100)
);

onMounted(() => {
	// 设置 Dom 值(ref 不生效先用 document)
	$store.chart.setEditCanvas('editLayoutDom', document.getElementById('go-chart-edit-layout'));
	$store.chart.setEditCanvas('editContentDom', document.getElementById('go-chart-edit-content'));
	$store.chart.setPageSize($store.chart.editCanvas.scale);
});

onUnmounted(() => {
	const pageName = $store.chart.editCanvasConfig.pageName;
	$store.chart.editCanvasConfig = editCanvasConfig;
	$store.chart.editCanvasConfig.pageName = pageName;
	$store.chart.componentList = [];
	$store.chart.setEditCanvas('editLayoutDom', null);
	$store.chart.setEditCanvas('editContentDom', null);
});
</script>

<style lang="scss" scoped>
#go-chart-edit-layout {
	z-index: 0;
	position: relative;
	height: 100%;
	overflow: hidden;
	background-image: linear-gradient(#18181c 14px, transparent 0), linear-gradient(90deg, transparent 14px, #86909c 0);
	background-color: #18181c;
	background-size:
		15px 15px,
		15px 15px;
	width: calc(100% - 2px);
	margin-right: 2px;
	#go-chart-edit-content {
		position: relative;
		z-index: 0;
		overflow: visible;
		transition: all var(--el-transition-duration-fast);
		box-shadow: 0 8px 10px rgba(30, 30, 30, 0.15);
		.edit-content-chart {
			position: absolute;
			overflow: hidden;
		}
	}
}
</style>
